<template>
	<div class="list-box">
		<div class="pannel-title pannel-between">
			<div>审核文章列表</div>
		</div>
		<div class="line"></div>
		<div class="data-table">
			<a-table :columns="columns" :row-key="(record) => record.id" :data-source="dataSource2" :pagination="pages" :loading="isLoading" @change="changePage">
				<template #action="{ record }">
					<router-link :to="{path:'/articleDetail',query:{id:record.id}}" style="margin-right: 5px" title="查看详情"><img src="@/assets/images/yulan.png" /></router-link>
					<a-tag @click="Approve(record)" style="margin-right: 5px;cursor:pointer;" v-if="record.status === 'Pending'" color="#87d068">通过</a-tag>
					<a-tag @click="Reject(record)" style="cursor:pointer;" v-if="record.status === 'Pending'" color="#f50">驳回</a-tag>
				</template>
				<template #isHide="{ record }">
					<a-tag v-if="record.is_del === 'Y'" color="error"><template #icon><close-circle-outlined /></template>已删除</a-tag>
					<a-tag v-else-if="record.is_hide === 'Y'" color="#cccccc">隐藏</a-tag>
					<a-tag v-else-if="record.is_hide === 'N'" color="#2db7f5">显示</a-tag>
				</template>
				<template #status="{ text }">
					<a-tag v-if="text === ' Pending'" color="#108ee9">待审核</a-tag>
					<a-tag v-else-if="text === 'Approved'" color="#87d068">审核通过</a-tag>
					<a-tag v-else-if="text === 'Rejected'" color="#f50">驳回</a-tag>
				</template>
			</a-table>
			<a-modal v-model:visible="visible" title="审核驳回">
				<a-textarea
				v-model:value="reason"
				placeholder="请输入驳回理由"
				:auto-size="{ minRows: 2, maxRows: 5 }"
				/>
				<template #footer>
					<div class="modal-btn">
						<a-button type="default" shape="round" @click="closeModal()">取消</a-button>
						<a-button :loading="btnLoading" type="danger" shape="round" @click="confirm()">驳回</a-button>
					</div>
				</template>
			</a-modal>
		</div>
		
	</div>
</template>
<script>
import { useStore } from "vuex";
import { reactive, ref } from "@vue/reactivity";
import { message, Table, Modal, Tag, Input,Button } from "ant-design-vue";
import { CloseCircleOutlined } from "@ant-design/icons-vue";
import httpRequest from "@/util/httpRequest";

export default {
	components: {
		ATable: Table,
		ATag:Tag,
		AModal:Modal,
		CloseCircleOutlined,
		ATextarea:Input.TextArea,
		AButton:Button
	},
	setup() {
		const store = useStore();
		//text：页面头部面包屑的显示文字，isBack：是否显示页面头部返回按钮
		store.dispatch("setBreadcrumb", {
			text: "审核管理 / 审核文章列表",
			isBack: false,
		});
		const dataSource2 = ref([]);
		const columns = reactive([
			{
				title: "文章标题",
				dataIndex: "title",
				key: "title",
			},
			{
				title: "作者",
				dataIndex: "author",
				key: "author",
			},
			{
				title: "排序序号",
				dataIndex: "display_priority",
				key: "display_priority",
			},
			{
				title: "状态",
				dataIndex: "is_hide",
				key: "is_hide",
				align:"center",
				slots: { customRender: "isHide" },
			},
			{
				title: "审核状态",
				dataIndex: "status",
				key: "status",
				align:"center",
				slots: { customRender: "status" },
			},
			{
				title: "操作",
				key: "action",
				slots: { customRender: "action" },
			},
		]);
		const pages = ref({
			current: 1,
			pageSize: 10,
			total:0
		});
		/**
		 * tree
		 */
		return {
			pages,
			dataSource2,
			columns,
			isLoading: ref(false),
			btnLoading: ref(false),
			cateIds:ref([]),
			visible:ref(false),
			reason:ref('')
		};
	},
	data() {
		return {
			isShowHtm: false,
			formState: {},
			active: "Tech",
			activeItem:{},
		};
	},
	mounted() {
		this.getList();
	},
	updated() {
		if (this.$route.query.type) {
			this.active = this.$route.query.type;
		}
	},
	methods: {
		getList() {
			this.isLoading = true;
			httpRequest
				.post("获取文章审核列表", {...this.pages,page:this.pages.current})
				.then((res) => {
					this.dataSource2 = res.data.data;
					this.pages.total = res.data.total;
				})
				.finally(() => {
					this.isLoading = false;
				});
		},
		changePage(e){
			this.pages.current = e.current;
			this.getList();
		},
		Approve(item){
            Modal.confirm({
                title: "系统提示",
                content: "确认通过审核？",
                okText: "确认",
                cancelText: "取消",
                onOk: () => {
                    return new Promise((res) => {
                        httpRequest
                            .post("审核文章", { id: item.id ,status:'Approved'})
                            .then(() => {
                                message.success("文章审核成功");
                                this.getList();
                            })
                            .catch(() => {
                                message.warning({ content: "文章审核失败", key: "error" });
                            })
                            .finally(() => {
                                res();
                            });
                    });
                },
            })
        },
		Reject(item){
			this.visible = true;
			this.reason = "";
			this.activeItem = item;
		},
		closeModal(){
			this.visible = false;
		},
		confirm(){
			if(this.reason.trim()){
				this.btnLoading = true;
				httpRequest
					.post("审核文章", { id: this.activeItem.id ,status:'Rejected',reason:this.reason})
					.then(() => {
						message.success("文章驳回成功");
						this.getList();
					})
					.catch(() => {
						message.warning({ content: "文章驳回失败", key: "error" });
					})
					.finally(() => {
						this.visible = false;
						this.btnLoading = false;
					});
			}
		}
	},
};
</script>
<style lang="less" scoped>
.line {
	width: 100%;
	margin: 20px 0;
	border-top: 1px solid #eee;
}
.pannel-tabs {
	width: 100%;
	height: 40px;
	line-height: 39px;
	border-bottom: 1px solid #f1f1f1;
	text-align: left;
	// display:flex;
	margin-bottom: 10px;
	a {
		color: #666;
		display: inline-block;
		height: 40px;
		border: 1px solid #f1f1f1;
		background: #f8f8f8;
		border-bottom: 1px solid transparent;
		padding: 0 15px;
		border-radius: 4px 4px 0 0;
		margin-right: 3px;
		&:hover {
			color: #378ef0;
		}
		&.active {
			color: #378ef0;
			background: #fff;
			border-bottom-color: #fff;
		}
	}
	.right-btn {
		float: right;
	}
}
</style>
